<template>
  <div>
    <div class="pageTitleWhole">
      <a-breadcrumb>
        <a-breadcrumb-item>库存油品</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <div class="card-container">
      <a-tabs
        :activeKey="oilType"
        type="card"
        :tab-bar-style="{margin:0}"
        size="large"
        @change="tabChange"
      >
        <!-- 柴油 -->
        <a-tab-pane
          :key="1"
          tab="柴油"
          style="border-bottom:1px solid #e8e8e8; border-right:1px solid #e8e8e8; border-left:1px solid #e8e8e8;"
        >
          <a-row :gutter="[48]">
            <a-col :span="8">
              <div id="liquidFill1" style="width:100%;height:150px;"></div>
            </a-col>
            <a-col :span="8">
              <div class="ant-card-body1">
                <div class="caiG1">
                  <p class="caiGou">采购入库（吨）</p>
                  <h1 class="cgYoul">{{oildDetail.stockInOilTotal}}</h1>
                </div>
                <p class="cgSale">
                  采购总金额（元）
                  <span>{{oildDetail.stockInTotalAmount}}</span>
                </p>
              </div>
            </a-col>
            <a-col :span="8">
              <div class="ant-card-body1">
                <div class="caiG2">
                  <p class="caiGou">加油出库（吨）</p>
                  <h1 class="cgYoul">{{oildDetail.stockOutOilTotal}}</h1>
                </div>
                <p class="cgSale">
                  交易总金额（元）
                  <span>{{oildDetail.stockOutTotalAmount}}</span>
                </p>
              </div>
            </a-col>
          </a-row>
          <a-form-model layout="inline" ref="cyForm" :model="cyForm" :style="'margin-top:60px;'">
            <div>
              <a-form-model-item label="结算对象" prop="custNameLike">
                <a-input v-model="cyForm.custNameLike" />
              </a-form-model-item>
              <a-form-model-item label="发票号" prop="invoiceNoLike">
                <a-input v-model="cyForm.invoiceNoLike" />
              </a-form-model-item>
              <a-form-model-item label="日期" prop="date">
                <a-range-picker v-model="cyForm.date" @change="cyDateChange" style="width: 250px" />
              </a-form-model-item>
              <a-form-model-item>
                <a-button type="primary" @click="check">查询</a-button>
              </a-form-model-item>
              <a-form-model-item>
                <a-button type="primary" @click="plus">+ 添加记录</a-button>
              </a-form-model-item>
              <a-form-model-item>
                <a-button type="primary" @click="exportExcel">导出Excel</a-button>
              </a-form-model-item>
            </div>
          </a-form-model>
          <a-tabs
            :activeKey="cyChangeType"
            @change="cyTabChange"
            :animated="false"
            :tab-bar-style="{margin:'20px 0 0 0'}"
          >
            <a-tab-pane :key="1" tab="采购入库" style="padding:0">
              <a-table
                :columns="cyColumns"
                :loading="loading"
                :data-source="cyData"
                :pagination="pagination"
                :row-key="(record,index) => index"
              >
                <template slot="do" slot-scope="text,record">
                  <!-- <a @click="detail(record)" style="margin-right:10px">详情</a> -->
                  <span v-if="record.invoiceNo" style="margin-right:10px">{{record.invoiceNo}}</span>
                  <a v-else @click="addInvoice(record)">添加发票</a>
                </template>
              </a-table>
            </a-tab-pane>
            <a-tab-pane :key="2" tab="加油出库" style="padding:0">
              <a-table
                :columns="cyOutColumns"
                :loading="loading"
                :data-source="cyOutData"
                :pagination="pagination"
                :row-key="(record,index) => index"
              ></a-table>
            </a-tab-pane>
          </a-tabs>
        </a-tab-pane>
        <!-- 机油 -->
        <a-tab-pane
          :key="2"
          tab="机油"
          style="border-bottom:1px solid #e8e8e8; border-right:1px solid #e8e8e8; border-left:1px solid #e8e8e8; margin-top:-1px;"
        >
          <a-row :gutter="[48]">
            <a-col :span="8">
              <div id="liquidFill2" style="width:100%;height:150px"></div>
            </a-col>
            <a-col :span="8">
              <div class="ant-card-body1">
                <div class="caiG1">
                  <p class="caiGou">采购入库（桶）</p>
                  <h1 class="cgYoul">{{oildDetail.stockInOilTotal}}</h1>
                </div>
                <p class="cgSale">
                  采购总金额（元）
                  <span>{{oildDetail.stockInTotalAmount}}</span>
                </p>
              </div>
            </a-col>
            <a-col :span="8">
              <div class="ant-card-body1">
                <div class="caiG2">
                  <p class="caiGou">领料出库（桶）</p>
                  <h1 class="cgYoul">{{oildDetail.stockOutOilTotal}}</h1>
                </div>
                <p class="cgSale">
                  交易总金额（元）
                  <span>{{oildDetail.stockOutTotalAmount}}</span>
                </p>
              </div>
            </a-col>
          </a-row>
          <a-form-model layout="inline" ref="oilForm" :model="oilForm" :style="'margin-top:60px;'">
            <a-form-model-item label="结算对象" prop="custNameLike">
              <a-input v-model="oilForm.custNameLike" />
            </a-form-model-item>
            <a-form-model-item label="日期" prop="date">
              <a-range-picker v-model="oilForm.date" @change="oilDateChange" style="width: 250px" />
            </a-form-model-item>
            <a-form-model-item>
              <a-button type="primary" @click="check">查询</a-button>
            </a-form-model-item>
            <a-form-model-item>
              <a-button type="primary" @click="plus">+ 添加记录</a-button>
            </a-form-model-item>
            <a-form-model-item>
              <a-button type="primary" @click="exportExcel">导出Excel</a-button>
            </a-form-model-item>
          </a-form-model>
          <a-tabs
            :activeKey="oilChangeType"
            @change="oilTabChange"
            :animated="false"
            :tab-bar-style="{margin:'20px 0 0 0'}"
          >
            <a-tab-pane :key="1" tab="采购入库" style="padding:0">
              <a-table
                :columns="oilColumns"
                :loading="loading"
                :data-source="oilData"
                :pagination="pagination"
                :row-key="(record,index) => index"
              >
                <template slot="do" slot-scope="text,record">
                  <span v-if="record.invoiceNo" style="margin-right:10px">{{record.invoiceNo}}</span>
                  <a v-else @click="addInvoice(record)">添加发票</a>
                </template>
              </a-table>
            </a-tab-pane>
            <a-tab-pane :key="2" tab="领料出库" style=" padding:0;">
              <a-table
                :columns="oilOutColumns"
                :loading="loading"
                :data-source="oilOutData"
                :pagination="pagination"
                :row-key="(record,index) => index"
              ></a-table>
            </a-tab-pane>
          </a-tabs>
        </a-tab-pane>
        <!-- 液压油 -->
        <a-tab-pane
          :key="3"
          tab="液压油"
          style="border-bottom:1px solid #e8e8e8; border-right:1px solid #e8e8e8; border-left:1px solid #e8e8e8; margin-top:-1px;"
        >
          <a-row :gutter="[48]">
            <a-col :span="8">
              <div id="liquidFill3" style="width:100%;height:150px"></div>
            </a-col>
            <a-col :span="8">
              <div class="ant-card-body1">
                <div class="caiG1">
                  <p class="caiGou">采购入库（桶）</p>
                  <h1 class="cgYoul">{{oildDetail.stockInOilTotal}}</h1>
                </div>
                <p class="cgSale">
                  采购总金额（元）
                  <span>{{oildDetail.stockInTotalAmount}}</span>
                </p>
              </div>
            </a-col>
            <a-col :span="8">
              <div class="ant-card-body1">
                <div class="caiG2">
                  <p class="caiGou">领料出库（桶）</p>
                  <h1 class="cgYoul">{{oildDetail.stockOutOilTotal}}</h1>
                </div>
                <p class="cgSale">
                  交易总金额（元）
                  <span>{{oildDetail.stockOutTotalAmount}}</span>
                </p>
              </div>
            </a-col>
          </a-row>
          <a-form-model layout="inline" ref="oilForm" :model="oilForm" :style="'margin-top:60px;'">
            <a-form-model-item label="结算对象" prop="custNameLike">
              <a-input v-model="oilForm.custNameLike" />
            </a-form-model-item>
            <a-form-model-item label="日期" prop="date">
              <a-range-picker v-model="oilForm.date" @change="oilDateChange" style="width: 250px" />
            </a-form-model-item>
            <a-form-model-item>
              <a-button type="primary" @click="check">查询</a-button>
            </a-form-model-item>
            <a-form-model-item>
              <a-button type="primary" @click="plus">+ 添加记录</a-button>
            </a-form-model-item>
            <a-form-model-item>
              <a-button type="primary" @click="exportExcel">导出Excel</a-button>
            </a-form-model-item>
          </a-form-model>
          <a-tabs
            :activeKey="oilChangeType"
            @change="oilTabChange"
            :animated="false"
            :tab-bar-style="{margin:'20px 0 0 0'}"
          >
            <a-tab-pane :key="1" tab="采购入库" style="padding:0">
              <a-table
                :columns="oilColumns"
                :loading="loading"
                :data-source="oilData"
                :pagination="pagination"
                :row-key="(record,index) => index"
              >
                <template slot="do" slot-scope="text,record">
                  <span v-if="record.invoiceNo" style="margin-right:10px">{{record.invoiceNo}}</span>
                  <a v-else @click="addInvoice(record)">添加发票</a>
                </template>
              </a-table>
            </a-tab-pane>
            <a-tab-pane :key="2" tab="领料出库" style="padding:0">
              <a-table
                :columns="oilOutColumns"
                :loading="loading"
                :data-source="oilOutData"
                :pagination="pagination"
                :row-key="(record,index) => index"
              ></a-table>
            </a-tab-pane>
          </a-tabs>
        </a-tab-pane>
      </a-tabs>
    </div>
    <a-modal
      v-model="cyVisible"
      title="添加发票号"
      :body-style="{padding:'60px 40px 30px 24px'}"
      centered
      :confirmLoading="confirmStatus"
      @ok="onAdd"
      @cancel="onCancel"
    >
      <a-form-model
        ref="invoiceForm"
        :rules="cyRules"
        :model="cyAddForm"
        :label-col="{span:4}"
        :wrapper-col="{span:20}"
      >
        <a-form-model-item label="发票号" prop="invoiceNoLike">
          <a-input type="text" v-model="cyAddForm.invoiceNoLike" />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
    <a-modal
      v-model="addRecordStatus"
      title="添加交易记录"
      :width="650"
      :body-style="{padding:'24px 40px 0px 20px'}"
      centered
      :confirmLoading="confirmStatus2"
      @ok="onAddRecord"
      @cancel="onCancelRecord"
    >
      <a-form-model
        :model="tradeType"
        :rules="tradeTypeRules"
        :label-col="{span:6}"
        :wrapper-col="{span:18}"
      >
        <a-form-model-item label="交易类型" prop="resource">
          <a-radio-group v-model="tradeType.resource" @change="radioChange">
            <a-radio :value="1">采购入库</a-radio>
            <a-radio :value="2">{{oilType == 1 ? '加油出库' : '领料出库'}}</a-radio>
          </a-radio-group>
        </a-form-model-item>
      </a-form-model>
      <template>
        <a-form-model
          v-if="tradeType.resource===1"
          ref="addRecordForm1"
          :rules="addRecordFormRules1"
          :model="addRecordForm1"
          :label-col="{span:6}"
          :wrapper-col="{span:18}"
        >
          <a-form-model-item label="结算对象" prop="custId">
            <a-select v-model="addRecordForm1.custId">
              <a-select-option
                v-for="item in custNameList"
                :key="item.id"
                :value="item.id"
              >{{item.name}}</a-select-option>
            </a-select>
          </a-form-model-item>
          <template v-if="oilType === 1">
            <a-form-model-item label="采购量（吨）" prop="oilVolume">
              <!-- <a-input type="text" @change="calcTotalPrice" v-model="addRecordForm1.oilVolume" /> -->
              <a-input-number
                :min="0.0001"
                :max="999999999999.9999"
                :precision="4"
                v-model="addRecordForm1.oilVolume"
                style="width:100%"
                @change="calcTotalPrice"
              />
            </a-form-model-item>
            <a-form-model-item label="油价（元/吨）" prop="price">
              <!-- <a-input type="text" @change="calcTotalPrice" v-model="addRecordForm1.price" /> -->
              <a-input-number
                :min="0.01"
                :max="999999999999.99"
                :precision="2"
                v-model="addRecordForm1.price"
                style="width:100%"
                @change="calcTotalPrice"
              />
            </a-form-model-item>
          </template>
          <template v-else>
            <a-form-model-item label="采购量（桶）" prop="oilVolume">
              <!-- <a-input type="text" @change="calcTotalPrice" v-model="addRecordForm1.oilVolume" /> -->
              <a-input-number
                :min="1"
                :max="999999999999"
                :precision="0"
                v-model="addRecordForm1.oilVolume"
                style="width:100%"
                @change="calcTotalPrice"
              />
            </a-form-model-item>
            <a-form-model-item label="单价（元/桶）" prop="price">
              <!-- <a-input type="text" @change="calcTotalPrice" v-model="addRecordForm1.price" /> -->
              <a-input-number
                :min="0.01"
                :max="999999999999.99"
                :precision="2"
                v-model="addRecordForm1.price"
                style="width:100%"
                @change="calcTotalPrice"
              />
            </a-form-model-item>
          </template>
          <a-form-model-item label="交易总价">
            <div>{{totalPrice}}</div>
          </a-form-model-item>
          <a-form-model-item label="发票号" prop="invoiceNo">
            <a-input type="text" v-model="addRecordForm1.invoiceNo" />
          </a-form-model-item>
        </a-form-model>
        <a-form-model
          v-else
          ref="addRecordForm2"
          :rules="addRecordFormRules2"
          :model="addRecordForm2"
          :label-col="{span:6}"
          :wrapper-col="{span:18}"
        >
          <a-form-model-item label="结算对象" prop="shipId">
            <a-select v-model="addRecordForm2.shipId">
              <a-select-option
                v-for="item in shipList"
                :key="item.id"
                :value="item.id"
              >{{item.name}}</a-select-option>
            </a-select>
          </a-form-model-item>
          <template v-if="oilType === 1">
            <a-form-model-item label="加油出库量（吨）" prop="oilVolume">
              <!-- <a-input type="text" v-model="addRecordForm2.oilVolume" /> -->
              <a-input-number
                :min="0.0001"
                :max="999999999999.9999"
                :precision="4"
                v-model="addRecordForm2.oilVolume"
                style="width:100%"
              />
            </a-form-model-item>
          </template>
          <template v-else>
            <a-form-model-item label="领料出库量（桶）" prop="oilVolume">
              <!-- <a-input type="text" v-model="addRecordForm2.oilVolume" /> -->
              <a-input-number
                :min="1"
                :max="999999999999"
                :precision="0"
                v-model="addRecordForm2.oilVolume"
                style="width:100%"
              />
            </a-form-model-item>
          </template>
        </a-form-model>
      </template>
    </a-modal>
  </div>
</template>
<script>
// eslint-disable-next-line no-unused-vars
import echartsLiquidfill from 'echarts-liquidfill' // echarts水滴球
import {
  queryShipNameList,
  queryShipOilPurchaseList,
  getOilStatistics,
  editPurchaseInvoiceNo,
  queryShipOilOutList,
  addShipOilStockIn,
  addShipOilPurchase,
  queryCustNameList
} from '@/api/shipCenter'
import { commonExport } from '@/api/request'
const fomrMessage = `必填项不能为空`
const cyColumns = [
  {
    title: '序号',
    width: 80,
    customRender: (text, record, index) => {
      return index + 1
    }
  },
  {
    title: '批次号',
    dataIndex: 'batchNo'
  },
  {
    title: '采购量（吨）',
    dataIndex: 'oilVolume',
    customRender: (text, record, index) => {
      return record.oilVolume.toFixed(4)
    }
  },
  {
    title: '油价（元/吨）',
    dataIndex: 'price',
    customRender: (text, record, index) => {
      return record.price.toFixed(2)
    }
  },
  {
    title: '交易总价（元）',
    dataIndex: 'totalAmount',
    customRender: (text, record, index) => {
      return record.totalAmount.toFixed(2)
    }
  },
  {
    title: '剩余油量（吨）',
    dataIndex: 'remainingOil',
    customRender: (text, record, index) => {
      return record.remainingOil.toFixed(4)
    }
  },
  {
    title: '结算对象',
    dataIndex: 'custName'
  },
  {
    title: '日期',
    dataIndex: 'createTime'
  },
  {
    title: '发票号',
    width: 120,
    key: 'do',
    dataIndex: 'invoiceNo',
    scopedSlots: {
      customRender: 'do'
    }
  }
]
const cyOutColumns = [
  {
    title: '序号',
    width: 80,
    customRender: (text, record, index) => {
      return index + 1
    }
  },
  {
    title: '批次号',
    dataIndex: 'batchNo'
  },
  {
    title: '加油出库量（吨）',
    dataIndex: 'oilVolume',
    width: '150px',
    customRender: (text, record, index) => {
      return record.oilVolume.toFixed(4)
    }
  },
  {
    title: '交易总价（元）',
    dataIndex: 'totalAmount',
    customRender: (text, record, index) => {
      return record.totalAmount.toFixed(2)
    }
  },
  {
    title: '采购批次号',
    dataIndex: 'purchaseBatchNo',
    width: '130px'
  },
  {
    title: '结算对象',
    dataIndex: 'custName'
  },
  {
    title: '日期',
    dataIndex: 'createTime'
  }
]
const oilColumns = [
  {
    title: '序号',
    width: 80,
    customRender: (text, record, index) => {
      return index + 1
    }
  },
  {
    title: '批次号',
    dataIndex: 'batchNo'
  },
  {
    title: '采购量（桶）',
    dataIndex: 'oilVolume'
  },
  {
    title: '单价（元/桶）',
    dataIndex: 'price',
    customRender: (text, record, index) => {
      return record.price.toFixed(2)
    }
  },
  {
    title: '交易总价（元）',
    dataIndex: 'totalAmount',
    customRender: (text, record, index) => {
      return record.totalAmount.toFixed(2)
    }
  },
  {
    title: '剩余量（桶）',
    dataIndex: 'remainingOil'
  },
  {
    title: '结算对象',
    dataIndex: 'custName'
  },
  {
    title: '日期',
    dataIndex: 'createTime'
  },
  {
    title: '发票号',
    width: 120,
    key: 'do',
    dataIndex: 'invoiceNo',
    scopedSlots: {
      customRender: 'do'
    }
  }
]
const oilOutColumns = [
  {
    title: '序号',
    width: 80,
    customRender: (text, record, index) => {
      return index + 1
    }
  },
  {
    title: '批次号',
    dataIndex: 'batchNo'
  },
  {
    title: '领料出库量（桶）',
    dataIndex: 'oilVolume',
    width: '150px'
  },
  {
    title: '交易总价（元）',
    dataIndex: 'totalAmount',
    customRender: (text, record, index) => {
      return record.totalAmount.toFixed(2)
    }
  },
  {
    title: '采购批次号',
    dataIndex: 'purchaseBatchNo',
    width: '130px'
  },
  {
    title: '结算对象',
    dataIndex: 'custName'
  },
  {
    title: '日期',
    dataIndex: 'createTime'
  }
]
export default {
  data () {
    return {
      confirmStatus: false,
      confirmStatus2: false,
      labelCol: { span: 5 },
      wrapperCol: { span: 19 },
      cyColumns,
      cyOutColumns,
      oilColumns,
      oilOutColumns,
      pageNum: 1,
      pageSize: 10,
      oilType: 1, // 油品类型：1柴油，2机油，3液压油
      cyChangeType: 1, // 1采购入库，2加油出库
      oilChangeType: 1,
      oildDetail: {},
      cyForm: {
        date: undefined,
        startDate: '', // 开始时间
        endDate: '', // 结束时间
        invoiceNoLike: '', // 发票号
        custNameLike: '' // 结算单位
      },
      oilForm: {
        date: undefined,
        startDate: '', // 开始时间
        endDate: '', // 结束时间
        custNameLike: '' // 结算单位
      },
      loading: true,
      cyData: [],
      cyOutData: [],
      oilData: [],
      oilOutData: [],
      pagination: {},
      cyVisible: false,
      cyAddForm: {
        invoiceNoLike: ''
      },
      cyRules: {
        invoiceNoLike: [
          { required: true, message: fomrMessage, trigger: 'blur' }
        ]
      },
      addRecordStatus: false, // 添加记录modal状态
      tradeType: {
        resource: 1
      },
      tradeTypeRules: {
        resource: [{ required: true, message: fomrMessage, trigger: 'change' }]
      },
      addRecordForm1: {
        custId: '', // 结算对象
        price: '', // 单价
        oilVolume: '', // 采购量
        invoiceNo: '' // 发票号
      },
      addRecordFormRules1: {
        custId: [{ required: true, message: fomrMessage, trigger: 'blur' }],
        price: [{ required: true, message: fomrMessage, trigger: 'blur' }],
        oilVolume: [{ required: true, message: fomrMessage, trigger: 'blur' }]
      },
      addRecordForm2: {
        shipId: '',
        oilVolume: ''
      },
      addRecordFormRules2: {
        shipId: [{ required: true, message: fomrMessage, trigger: 'blur' }],
        oilVolume: [{ required: true, message: fomrMessage, trigger: 'blur' }]
      },
      custNameList: [],
      totalPrice: '',
      shipList: [],
      btnControl: {},
      createStatus: true,
      createStatus2: true
    }
  },
  methods: {
    liquidFill (res, id) {
      let liquid = this.$echarts.init(
        document.getElementById('liquidFill' + id)
      )
      let result
      let unit = id === 1 ? '吨' : '桶'
      if (res >= 30) {
        result = 0.5
      } else {
        result = 0.2
      }
      liquid.setOption({
        series: [
          {
            type: 'liquidFill',
            data: [result],
            radius: '95%',
            backgroundStyle: {
              color: '#fff',
              shadowColor: '#fff',
              shadowBlur: 0
            },
            itemStyle: {
              normal: {
                shadowBlur: 0
              }
            },
            outline: {
              show: true, // 是否显示轮廓 布尔值
              borderDistance: 5, // 外部轮廓与图表的距离 数字
              itemStyle: {
                borderColor: result === 0.5 ? '#1890FF' : '#f5222d', // 边框的颜色
                borderWidth: 2 // 边框的宽度
                // shadowBlur: 5 , // 外部轮廓的阴影范围 一旦设置了内外都有阴影
                // shadowColor: '#000' // 外部轮廓的阴影颜色
              }
            },
            color: result === 0.5 ? ['#1890FF'] : ['#f5222d'],
            label: {
              position: ['50%', '50%'],
              formatter: function (param) {
                // // console.log(param.data)
                return `当前库存（${unit}）\n${res}`
              },
              fontSize: 14,
              color: '#666'
            }
          }
        ]
      })
    },
    custIdList () {
      queryCustNameList({
        belongCompany: 'JIA_CHUANG',
        custTypeLike: 'SUPPLIER',
        isPayable: 1
      })
        .then(res => {
          // // console.log(res)
          this.custNameList = res.data
        })
        .catch(rs => {})
    },
    shipNameList () {
      queryShipNameList({
        status: 1
        // isSelfOperation: 1
      }).then(res => {
        // // console.log(res)
        this.shipList = res.data
      })
    },
    getOilList (param) {
      this.loading = true
      queryShipOilPurchaseList(param)
        .then(res => {
          // // console.log(res.data)

          if (this.oilType === 1) {
            this.cyData = res.data.list
          } else {
            this.oilData = res.data.list
          }
          let currentPage = this.pageNum
          this.pagination = {
            current: currentPage,
            pageSize: res.data.pageSize,
            total: res.data.total,
            showQuickJumper: false,
            showSizeChanger: true,
            showTotal: total =>
              `共${total}条记录 第${currentPage}/${res.data.pages}页`,
            onChange: pageNum => {
              this.pageNum = pageNum
              let paramData = {}
              if (this.oilType === 1) {
                paramData = {
                  oilType: this.oilType,
                  pageNum: this.pageNum,
                  pageSize: this.pageSize,
                  ...this.cyForm
                }
              } else {
                paramData = {
                  oilType: this.oilType,
                  pageNum: this.pageNum,
                  pageSize: this.pageSize,
                  ...this.cyForm
                }
              }
              delete paramData.date
              this.getOilList(paramData)
            },
            onShowSizeChange: (current, size) => {
              this.pageNum = current
              this.pageSize = size
              let paramData = {}
              if (this.oilType === 1) {
                paramData = {
                  oilType: this.oilType,
                  pageNum: this.pageNum,
                  pageSize: this.pageSize,
                  ...this.cyForm
                }
              } else {
                paramData = {
                  oilType: this.oilType,
                  pageNum: this.pageNum,
                  pageSize: this.pageSize,
                  ...this.cyForm
                }
              }
              delete paramData.date
              this.getOilList(paramData)
            }
          }
          this.loading = false
        })
        .catch(rs => {})
    },
    getOilDetail (param) {
      let _this = this
      getOilStatistics(param)
        .then(res => {
          // // console.log(res.data)
          res.data.stockInTotalAmount = res.data.stockInTotalAmount.toFixed(2)
          res.data.stockOutTotalAmount = res.data.stockOutTotalAmount.toFixed(2)
          _this.oildDetail = res.data
          _this.liquidFill(res.data.remainingOilTotal, _this.oilType)
        })
        .catch(rs => {})
    },
    getOilOutList (param) {
      queryShipOilOutList(param)
        .then(res => {
          // // console.log(res.data)
          if (this.oilType === 1) {
            this.cyOutData = res.data.list
          } else {
            this.oilOutData = res.data.list
          }
          let currentPage = this.pageNum
          this.pagination = {
            current: currentPage,
            pageSize: res.data.pageSize,
            total: res.data.total,
            showQuickJumper: false,
            showSizeChanger: true,
            showTotal: total =>
              `共${total}条记录 第${currentPage}/${res.data.pages}页`,
            onChange: pageNum => {
              this.pageNum = pageNum
              let paramData = {
                oilType: this.oilType,
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                inOrOut: 1,
                oilBusinessType: 'OIL',
                ...this.cyForm
              }
              delete paramData.date
              this.getOilOutList(paramData)
            },
            onShowSizeChange: (current, size) => {
              this.pageNum = current
              this.pageSize = size
              let paramData = {
                oilType: this.oilType,
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                inOrOut: 1,
                oilBusinessType: 'OIL',
                ...this.cyForm
              }
              delete paramData.date
              this.getOilOutList(paramData)
            }
          }
          this.loading = false
        })
        .catch(rs => {})
    },
    tabChange (activeKey) {
      this.oilType = activeKey
      this.cyChangeType = 1
      this.oilChangeType = 1
      this.pageNum = 1
      this.pageSize = 10
      this.getOilDetail({
        oilType: activeKey
      })
      // // console.log(this.pageNum)
      this.getOilList({
        oilType: this.oilType,
        pageSize: this.pageSize,
        pageNum: this.pageNum
      })
    },
    cyTabChange (activeKey) {
      this.cyChangeType = activeKey
      this.$refs['cyForm'].resetFields()
      this.pageSize = 10
      this.pageNum = 1
      if (activeKey === 1) {
        this.getOilList({
          oilType: this.oilType,
          pageSize: this.pageSize,
          pageNum: this.pageNum
        })
        this.getOilDetail({
          oilType: this.oilType
        })
      } else {
        this.getOilOutList({
          oilType: this.oilType,
          pageSize: this.pageSize,
          pageNum: this.pageNum,
          inOrOut: 1,
          oilBusinessType: 'OIL'
        })
        this.getOilDetail({
          oilType: this.oilType
        })
      }
    },
    oilTabChange (activeKey) {
      // // console.log(activeKey)
      this.oilChangeType = activeKey
      this.$refs['oilForm'].resetFields()
      this.pageSize = 10
      this.pageNum = 1
      if (activeKey === 1) {
        this.getOilList({
          oilType: this.oilType,
          pageSize: this.pageSize,
          pageNum: this.pageNum
        })
        this.getOilDetail({
          oilType: this.oilType
        })
      } else {
        this.getOilOutList({
          inOrOut: 1,
          oilType: this.oilType,
          pageSize: this.pageSize,
          pageNum: this.pageNum
        })
        this.getOilDetail({
          oilType: this.oilType
        })
      }
    },
    check () {
      let _this = this
      let param = {}
      let param2 = {}
      if (_this.oilType === 1) {
        param = {
          ..._this.cyForm,
          oilType: _this.oilType,
          pageNum: _this.pageNum,
          pageSize: this.pageSize
        }
        delete param.date
        if (_this.cyChangeType === 1) {
          _this.getOilList(param)
        } else {
          param.inOrOut = 1
          param.oilBusinessType = 'OIL'
          _this.getOilOutList(param)
        }
        param2 = {
          oilType: this.oilType,
          ..._this.cyForm
        }
      } else {
        param = {
          ..._this.oilForm,
          oilType: _this.oilType,
          pageNum: _this.pageNum,
          pageSize: this.pageSize
        }
        delete param.date
        if (_this.oilChangeType === 1) {
          _this.getOilList(param)
        } else {
          param.inOrOut = 1
          _this.getOilOutList(param)
        }
        param2 = {
          oilType: this.oilType,
          ..._this.oilForm
        }
      }
      _this.getOilDetail(param2)
    },
    exportExcel () {
      let _this = this
      let param = {}
      if (_this.oilType === 1) {
        param = {
          ..._this.cyForm,
          oilType: _this.oilType,
          pageNum: _this.pageNum,
          pageSize: this.pageSize
        }
        delete param.date
        if (_this.cyChangeType === 1) {
          param.columns = this.cyColumns
          commonExport('/ship/exportShipOilPurchaseList', param)
        } else {
          param.inOrOut = 1
          param.oilBusinessType = 'OIL'
          param.columns = this.cyOutColumns
          commonExport('/ship/exportShipOilOutList', param)
        }
      } else {
        param = {
          ..._this.oilForm,
          oilType: _this.oilType,
          pageNum: _this.pageNum,
          pageSize: this.pageSize
        }
        delete param.date
        if (_this.oilChangeType === 1) {
          param.columns = this.oilColumns
          commonExport('/ship/exportShipOilPurchaseList', param)
        } else {
          param.inOrOut = 1
          param.columns = this.oilOutColumns
          commonExport('/ship/exportShipOilOutList', param)
        }
      }
    },
    plus () {
      if (!this.btnControl.createRecord) {
        this.$message.error('您无此权限！')
        return false
      }
      this.tradeType.resource = 1
      this.addRecordStatus = true
      // // console.log(this.oilType)
    },
    cyDateChange (date, dateString) {
      // console.log(dateString)
      this.cyForm.startDate = dateString[0]
      this.cyForm.endDate = dateString[1]
    },
    oilDateChange (date, dateString) {
      this.oilForm.startDate = dateString[0]
      this.oilForm.endDate = dateString[1]
    },
    addInvoice (e) {
      if (!this.btnControl.createInvoice) {
        this.$message.error('您无此权限！')
        return false
      }
      // console.log(e)
      this.cyVisible = true
      this.cyOjb = e
    },
    onAdd () {
      let _this = this
      if (!_this.createStatus2) {
        this.$message.error('请勿重复提交！')
        return false
      }
      _this.$refs.invoiceForm.validate(valid => {
        if (valid) {
          // // console.log(_this.cyOjb)
          _this.createStatus2 = false
          _this.confirmStatus = true
          editPurchaseInvoiceNo({
            id: _this.cyOjb.id,
            invoiceNo: _this.cyAddForm.invoiceNoLike
          })
            .then(res => {
              if (res.code === 0) {
                _this.$message.success('添加成功！')
                _this.cyVisible = false
                _this.$refs.invoiceForm.resetFields()
                let param = {
                  oilType: _this.oilType,
                  pageNum: _this.pageNum,
                  pageSize: this.pageSize,
                  ..._this.cyForm
                }
                _this.getOilList(param)
                setTimeout(() => {
                  _this.confirmStatus = false
                  _this.createStatus2 = true
                }, 300)
              }
            })
            .catch(rs => {
              _this.confirmStatus = false
              _this.createStatus2 = true
            })
        }
      })
    },
    onCancel () {
      this.cyVisible = true
      this.$refs.invoiceForm.resetFields()
    },
    radioChange (e) {
      this.totalPrice = ''
      if (e.target.value === 1) {
        this.$refs.addRecordForm2.resetFields()
      } else {
        this.$refs.addRecordForm1.resetFields()
      }
    },
    calcTotalPrice () {
      // // console.log(this.addRecordForm1)
      let price = Number(this.addRecordForm1.price)
      let oilVolume = Number(this.addRecordForm1.oilVolume)
      if (!isNaN(price) && !isNaN(oilVolume)) {
        this.totalPrice = (price * oilVolume).toFixed(2)
      } else {
        this.totalPrice = ''
      }
    },
    onAddRecord () {
      let _this = this
      // // console.log(this.tradeType.resource)
      if (!_this.createStatus) {
        this.$message.error('请勿重复提交！')
        return false
      }
      if (_this.tradeType.resource === 1) {
        _this.$refs.addRecordForm1.validate(valid => {
          if (valid) {
            // // console.log(_this.cyOjb)
            _this.confirmStatus2 = true
            _this.createStatus = false
            addShipOilPurchase({
              oilType: _this.oilType,
              ..._this.addRecordForm1
            })
              .then(res => {
                if (res.code === 0) {
                  _this.$message.success('添加成功！')
                  _this.$refs.addRecordForm1.resetFields()
                  _this.addRecordStatus = false

                  let param = {
                    oilType: _this.oilType,
                    pageNum: _this.pageNum,
                    pageSize: this.pageSize,
                    ..._this.cyForm
                  }
                  delete param.date
                  _this.getOilList(param)
                  _this.getOilDetail({
                    oilType: _this.oilType
                  })
                  setTimeout(() => {
                    _this.confirmStatus2 = false
                    _this.createStatus = true
                  }, 300)
                }
              })
              .catch(rs => {
                _this.createStatus = true
                _this.confirmStatus2 = false
              })
          }
        })
      } else {
        _this.$refs.addRecordForm2.validate(valid => {
          if (valid) {
            // // console.log(_this.cyOjb)
            _this.confirmStatus2 = true
            addShipOilStockIn({
              oilType: _this.oilType,
              businessType: 'OIL',
              ..._this.addRecordForm2
            })
              .then(res => {
                if (res.code === 0) {
                  _this.$message.success('添加成功！')
                  _this.$refs.addRecordForm2.resetFields()
                  _this.addRecordStatus = false
                  _this.createStatus = true
                  let paramData = {
                    oilType: this.oilType,
                    pageNum: this.pageNum,
                    pageSize: this.pageSize,
                    inOrOut: 1,
                    ...this.cyForm
                  }
                  delete paramData.date
                  _this.getOilOutList(paramData)
                  _this.getOilDetail({
                    oilType: _this.oilType
                  })
                  setTimeout(() => {
                    _this.confirmStatus2 = false
                  }, 300)
                }
              })
              .catch(rs => {
                _this.confirmStatus2 = false
              })
          }
        })
      }
    },
    onCancelRecord () {
      if (this.tradeType.resource === 1) {
        this.$refs.addRecordForm1.resetFields()
      } else {
        this.$refs.addRecordForm2.resetFields()
      }
      setTimeout(() => {
        this.totalPrice = ''
        this.tradeType.resource = 1
        this.addRecordStatus = false
      }, 1)
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.btnControl = this.$root._bc
      // console.log(this.$root._bc)
    })
    this.getOilList({
      oilType: this.oilType,
      pageSize: this.pageSize,
      pageNum: this.pageNum
    })
    this.getOilDetail({
      oilType: this.oilType
    })
    this.custIdList()
    this.shipNameList()
  }
}
</script>

<style lang="less" scoped>
.card-container {
  background: #f0f2f5;
  overflow: hidden;
  padding: 24px;
  .ant-tabs-card {
    .ant-tabs-content {
      height: 120px;
      margin-top: -16px;
      .ant-tabs-tabpane {
        background: #fff;
        padding: 40px 24px 24px 24px;
      }
    }
    .ant-tabs-bar {
      border-color: #fff;
      .ant-tabs-tab {
        border-color: transparent;
        background: transparent;
      }
      .ant-tabs-tab-active {
        border-color: #fff;
        background: #fff;
      }
    }
  }
}
</style>
<style>
.ant-card-body1 {
  background: #f9fcff;
  border: 1px #dbe3ff solid;
  padding: 24px 24px 16px 24px;
}
.caiG1 {
  background: url(../../../static/images/ChuanbOil2.png) no-repeat right center;
}
.caiG2 {
  background: url(../../../static/images/ChuanbOil1.png) no-repeat right center;
}
.ant-card-body1 .cgYoul {
  font-size: 40px;
  color: rgba(0, 0, 0, 0.85);
  font-weight: 400;
  margin-bottom: 0;
}
.ant-card-body1 .caiGou {
  margin-bottom: 0;
  line-height: 16px;
}
.ant-card-body1 .cgSale {
  margin-bottom: 0;
  line-height: 16px;
  border-top: 1px #dbe3ff solid;
  padding-top: 16px;
}
.ant-card-body1 .cgSale span {
  float: right;
  font-size: 18px;
  font-weight: bold;
}
</style>
